import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index.js'
import Reg from '@/views/Reg/index.vue'
import Login from '@/views/Login/index.vue'
import HmInput from '@/views/From/HmInput.vue'
import HmFrom from '@/views/From/HmFrom.vue'
import HmButton from '@/views/From/HmButton.vue'
import Container from '@/views/From/Container.vue'
import Dropdown from '@/views/From/Dropdown.vue'
import Testa from '@/views/From/children/Testa.vue'
import Testb from '@/views/From/children/Testb.vue'
import Sync from '@/views/From/Sync.vue'
import Layout from '@/views/Layout/index.vue'
import ArtCate from '@/views/Layout/arc/art-cate.vue'
import ArtList from '@/views/Layout/arc/art-list.vue'
import Home from '@/views/Layout/home/home.vue'
import Son from '@/views/Layout/home/Son.vue'
import UserAvatar from '@/views/Layout/user/user-avatar'
import UserInfo from '@/views/Layout/user/user-info'
import UserPwd from '@/views/Layout/user/user-pwd'

Vue.use(VueRouter)

const routes = [
  {
    path: '/reg',
    component: Reg
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/son',
    component: Son
  },
  {
    path: '/dropdown',
    component: Dropdown
  },
  {
    path: '/sync',
    component: Sync
  },
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '/home',
        component: Home
      },
      {
        path: '/art-cate',
        component: ArtCate
      },
      {
        path: '/art-list',
        component: ArtList
      },
      {
        path: '/user-info',
        component: UserInfo
      },
      {
        path: '/user-avatar',
        component: UserAvatar
      },
      {
        path: '/user-pwd',
        component: UserPwd
      }
    ]
  },
  {
    path: '/hminput',
    component: HmInput
  },
  {
    path: '/hmfrom',
    component: HmFrom
  },
  {
    path: '/hmbutton',
    component: HmButton
  },
  {
    path: '/container',
    component: Container,
    children: [
      {
        path: '/testa',
        component: Testa
      },
      {
        path: '/testb',
        component: Testb
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

const whitePage = ['/login', '/reg', '/404']
router.beforeEach(async (to, from, next) => {
  /* next特性: next()它是不会再经过导航守卫直接进入相应页面
               next(其他path),它会再经过一次导航守卫
   是否有token(通过获取vuex中的token做判断)
      有token
         如果去的页面是login页
             跳转到首页
          如果去的页面是非login页
          正常进入
      无token
           没有token有些页面也是可以去的,比如404,注册,login,会做一个页面白名单,不需要登录就可以将进入
           如果是白名单页面 ,正常进入
           如果是非白名单页面,跳转到登录页    */
  if (store.state.login.token) {
    // 有token
    // console.log('to', to)
    // 注意大写要转换成小写
    if (to.path.toLowerCase() === '/login') {
      next('/')
    } else {
      // store.dispatch('login/getUserInfo')

      if (store.state.login.userInfo.id) {
        next()
        // 正常进入
      } else {
        // 没有就调用接口获取用户信息
        // console.log(1)
        // store.dispatch('login/getUserInfo')
        // 1:接口没调用完成没有验证token是否有效就进入页面了,是一个不理
        // 2:每一次进入一个非login页,有token时都会调用一次获取token
        // try {
        await store.dispatch('login/getUserInfo')
        console.log(2)
        next()
        // } catch (err) {
        //   console.log([err])

        // if (err.response.status === 401) {
        //   store.commit('login/delToken')
        //   Message.error(err.response.data.message)
        //   next('/login')
        // }
        // }
      }
    }
  } else {
    if (whitePage.includes(to.path.toLowerCase())) {
      next()
    } else {
      next('/login?redirect=' + to.path)
    }
  }
})

const originalPush = VueRouter.prototype.push
// 修改原型对象中的push方法
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
export default router
